<template>
  <div class="my">
    <div class="bnt">
      <div class="topbnt_left fl">
        <ul>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
        </ul>
      </div>
      <h1 class="tith1 fl">我的</h1>
      <div class="fr topbnt_right">
        <ul>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li hidden>
            <router-link to="" class="topbtnstyle"></router-link>
          </li>
          <li class="li1">
            <router-link to="/shouye" class="topbtnstyle">返回</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="biaogediv">
      <dv-border-box-11>
        <h2 class="mytitle">修改账户信息</h2>
        <div class="form1">
          <el-form v-model="form" label-width="150px">
            <el-form-item label="账号：" class="wenzi" clearable disabled>
              <el-input v-model="form.zhanghao"></el-input>
            </el-form-item>
            <el-form-item label="姓名：" class="wenzi" clearable disabled>
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="密码：" class="wenzi" clearable disabled>
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" class="wenzi" clearable disabled>
              <el-input v-model="form.newpassword" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即更改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </dv-border-box-11>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        zhanghao: this.$store.state.username,
        name: this.$store.state.name,
        password: "",
        newpassword: "",
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    onSubmit() {
      if (this.password === "" || this.newpassword === "") {
        this.$message({
          message: '警告，密码不能为空！！',
          type: 'warning'
        });
      } else if (this.password != this.newpassword) {
        this.$message({
          message: '警告，密码不能为空！！',
          type: 'warning'
        });
      } else {
        this.$confirm("是否确定修改密码?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let params = new URLSearchParams();
            params.append("id", this.$store.state.id);
            params.append("name", this.form.zhanghao);
            params.append("password", this.form.password);
            this.$axios
              .post("/user/Update", params)
              .then((response) => {
                console.log(response);
                this.$message({
                  type: "success",
                  message: "修改成功！请重新登录！！",
                });
              })
              .catch((error) => {
                console.error();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      }
    },
  },
};
</script>
<style lang='less' scoped>
.el-form-item__label {
  color: #fff !important;
}
.my {
  height: 100%;
}
.myrongqi {
  height: 95%;
  width: 94%;
  padding: 2% 3%;
}
.topbtnstyle {
  left: 100px;
  top: 150px;
}
.li1 {
  width: 171%;
}
.biaogediv {
  padding: 100px 697px;
  height: calc(100% - 35%);
}
.form1 {
  margin-top: 10px;
  padding-top: 20px;
}
.wenzi {
  margin: 10px 100px 30px 5px;
}
.mytitle {
  padding-top: 10px;
  text-align: center;
}
.ziyuanImg{
  width: 25%;
  margin: 0px 35%;
}
</style>